<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="aim">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="start">
          <el-date-picker
            v-model="start"
            type="date"
            placeholder="选择开始日期"
          >
          </el-date-picker>
        </div>
        <div class="end">
          <el-date-picker v-model="end" type="date" placeholder="选择结束日期">
          </el-date-picker>
        </div>
        <el-button class="btn" type="primary" icon="el-icon-search" @click="changeChart"
          >搜索</el-button
        >
      </div>
      <div class="container">
        <div id="myChart" :style="{ width: '1200px', height: '500px' }"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "活期",
          label: "平台活期营收统计",
        },
        {
          value: "定期",
          label: "平台定期营收统计",
        },
        {
          value: "黄金",
          label: "平台黄金营收统计",
        },
        {
          value: "基金",
          label: "平台基金营收统计",
        },
        {
          value: "借贷",
          label: "平台借贷营收统计",
        },
      ],
      value: "定期",
      start: "2021-04-01",
      end: "2021-04-25",
      chartData: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["总收入", "交易数量", "平均收入"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "总收入",
            min: 0,
            max: 250000,
            interval: 10000,
            axisLabel: {
              formatter: "{value} 元",
            },
          },
          {
            type: "value",
            name: "交易数量",
            min: 0,
            max: 50,
            interval: 5,
            axisLabel: {
              formatter: "{value} 次",
            },
          },
        ],
        series: [
          {
            name: "总收入",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "交易数量",
            type: "bar",
            yAxisIndex: 1,
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "平均收入",
            type: "line",
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.drawLine();
  },
  created() {
    this.getEarningsInfo();
  },
  methods: {
    changeChart(){
      this.getEarningsInfo(
        {
        begin: this.start,
        end: this.end,
        type: this.value,
      }
      )
    },
    async getEarningsInfo() {
      const res = await this.$http.bill.getEarningsInfo({
        begin: this.start,
        end: this.end,
        type: this.value,
      });
      console.log(res);
      const time = [...res.data.timeData];
      const avg = [...res.data.avgMoney];
      const count = [...res.data.sumCount];
      const sum = [...res.data.sumMoney];
      this.chartData.xAxis[0].data = time;
      this.chartData.series[0].data = sum;
      this.chartData.series[1].data = count;
      this.chartData.series[2].data = avg;
      this.drawLine();
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption(this.chartData);
    },
  },
};
</script>

<style scoped>
.el-breadcrumb {
  height: 30px;
  border-bottom: 1px solid #ccc;
}
.aim {
  display: flex;
  margin-top: 20px;
}
.start {
  margin-left: 20px;
}
.end {
  margin-left: 20px;
}
.btn {
  margin-left: 20px;
}
.charts-box {
  width: 100%;
  height: 300px;
}
.container {
  margin: 40px auto;
}
</style>